﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>报警险情管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/xadmin.css">
  <link rel="stylesheet" href="./css/com_table.css">
  <link rel="stylesheet" href="./css/bjxq.css">

  <!--[if lt IE 9]>
      <script src="./lib/ie9/html5.min.js"></script>
      <script src="./lib/ie9/respond.min.js"></script>
    <![endif]-->
  <style>
    .comContent {
      display: none;
    }

    .comContentActive {
      display: block;
    }
  </style>
</head>

<body>
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="javascript:;">监控管理</a>
      <a href="javascript:;">报警险情管理</a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      href="javascript:location.replace(location.href);" title="刷新">
      <i class="layui-icon" style="line-height:30px">ဂ</i></a>
  </div>

  <div class="x-body">
    <div class="layui-row">
      <div class="comMarL">
        <a href="javascript:;" class="layui-btn tabBtn">可视化数据展示</a>
        <a href="javascript:;" class="layui-btn tabBtn">详细数据表单</a>
      </div>
    </div>
    <div class="comContent comContentActive clearfix">
      <div class="buju">
        <div class="leftSlice">

          <div class="oTopSlice">
            <div class="lSlice">
              <div class="dataOne bjxq_dataone">
                <div class="sanJiaoData">
                  <p>所有区域报警数量排名前十的企业</p>
                  <div class="sanInfo">
                    <div> <span>12346</span>
                      <p class="tri-test"></p> <span>企业一</span>
                    </div>
                    <div> <span>12346</span>
                      <p class="tri-test"></p> <span>企业一</span>
                    </div>
                    <div> <span>12346</span>
                      <p class="tri-test"></p> <span>企业一</span>
                    </div>
                    <div> <span>12346</span>
                      <p class="tri-test"></p> <span>企业一</span>
                    </div>
                    <div> <span>12346</span>
                      <p class="tri-test"></p> <span>企业一</span>
                    </div>
                    <div> <span>12346</span>
                      <p class="tri-test"></p> <span>企业一</span>
                    </div>
                    <div> <span>12346</span>
                      <p class="tri-test"></p> <span>企业一</span>
                    </div>
                    <div> <span>12346</span>
                      <p class="tri-test"></p> <span>企业一</span>
                    </div>
                    <div> <span>12346</span>
                      <p class="tri-test"></p> <span>企业一</span>
                    </div>
                    <div> <span>12346</span>
                      <p class="tri-test"></p> <span>企业一</span>
                    </div>
                  </div>
                </div>
                <div id="mainPoints"></div>
              </div>
              <div class="dataTwo">
                <div id="distribution_map" style="display:none"></div>
                <img src="./images/jk_data/z_map.jpg" alt="">

              </div>
            </div>
            <div class="rSlice">
              <div id="mainCircle" style="width: 100%;height:160px;overflow: hidden;display: none;"></div>
              <div id="mainCircle">
                <img src="./images/jk_data/zhexianq.jpg" alt="">
              </div>
              <div id="mainCircle1" style="width: 100%;height:200px;display: none;"></div>
              <div id="mainCircle1">
                <img src="./images/jk_data/chuli.jpg" alt="">
              </div>


              <div class="police" style="display: none;">
                <p>该区域真实报警和误报</p>
                <div class="sliceCo">
                  <div id="mainZhen" style="width: 50%;height:200px;"></div>
                  <div id="mainXu" style="width: 50%;height:200px;"></div>
                </div>
              </div>
              <div class="police policeImgW">
                 <img src="./images/jk_data/wucha.jpg" alt="">
              </div>

            </div>


          </div>


          <div class="distract">
            <!-- 今日行政区域分布 -->
            <div id="main"></div>
            <!-- 今日区域分布  -->
            <div id="mainOff"></div>
            <!-- 时间分布 -->
            <div id="mainStatus" style="width: 30%;height:300px;"></div>
          </div>
          <!-- 今日趋势 -->

        </div>
        <div class="rightSlice">
          <div class="oTip">
            <div class="dataShow cheng">
              <p>总报警数</p>
              <span>3</span>
            </div>
            <div class="dataShow lv">
              <p>今日报警数</p>
              <span>3</span>
            </div>
            <div class="dataShow lan">
              <p>报警处理率</p>
              <span>100%</span>
            </div>
            <div class="dataShow lightLan">
              <p>火灾报警率</p>
              <span>1.7%</span>
            </div>
          </div>
          <div class="tTip">
            <div class="police">
              <p>该区域真实报警和误报</p>
              <div class="sliceCo">
                <div id="mainZhen1" style="width: 50%;height:200px;margin-top:-30px;"></div>
                <div id="mainXu1" style="width: 50%;height:200px;margin-top:-30px;"></div>
              </div>
            </div>
          </div>
          <div class="tipTable">
            <p>今日报警明细</p>
            <table>
              <tr>
                  <th>GST6000D</th>
                <th>2020-4-1 21:31:48</th>
              </tr>
              <tr>
                  <td>GST6000-T</td>
                  <td>2020-3-12 11:21:31</td>
              </tr>
              <tr>
                  <td>CFS8000 </td>
                  <td>2020-3-1 14:45:04</td>
              </tr>
              <tr>
                  <td>GST1000</td>
                  <td>2020-2-1 18:19:25</td>
              </tr>
              <tr>
                  <td>GST6000D</td>
                  <td>2020-1-1 16:16:36</td>
              </tr>
              <tr>
                  <td>CFS8000</td>
                  <td>2019-12-21 19:23:10</td>
              </tr>
              <tr>
                  <td>CFS8001</td>
                  <td>2020-3-27 17:42:17</td>
              </tr>
              <tr>
                  <td>CFS8004</td>
                  <td>2020-3-21 12:25:29</td>
              </tr>

            </table>
          </div>

        </div>

      </div>






    </div>
    <!-- 表格 -->
    <div class="comContent">
      <table class="layui-hide" id="tableL" lay-filter="tableL">
      </table>
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">处理</a>
      </script>
    </div>
  </div>





  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <script type="text/javascript" src="./js/config.js"></script>
  <script type="text/javascript" src="./lib/layui/layui.js"></script>
  <script type="text/javascript" src="./js/munu.js"></script>
  <script type="text/javascript" src="plugins/tableToExcel/tableToExcel.js"></script>
  <script type="text/javascript" src="plugins/echarts/index.js"></script>
  <script type="text/javascript" src="./js/xadmin.js"></script>
  <!-- <script src="./plugins/echarts/hunan_data/datas.json"></script>
  <script type="text/javascript" src="./js/mapData.js"></script> -->
  <script type="text/javascript" src="./js/map2.js"></script>
  <script type="text/javascript">
    var hideMenu = [];
    var wData = {
      Command: "ReadPagingData",
      TableName: "DotBanks"
    };
    //var url = app.url;
    url = './data/bjxqgl.json';
    var headArr = [
      { field: 'id', title: '序号', sort: true },
      { field: 'shebei', title: '设备名称' },
      { field: 'gongsi', title: '公司名称' },
      { field: 'wbdanwei', title: '维保单位' },
      { field: 'fuzeren', title: '负责人' },
      { field: 'phone', title: '负责人电话' },
      { field: 'address', title: '设备地址' },
      { field: 'type', title: '设备类型' },
      { field: 'bjtype', title: '报警类型' },
      { field: 'bjtime', title: '报警时间' },
      { title: '操作', toolbar: '#barDemo' }
    ];
    layui.use(['table', 'laydate'], function () {
      $ = layui.jquery;
      var table = layui.table;




      /*******************tab表格**********************/
      $('.tabBtn').each(function (i) {
        $(this).click(function () {
          $('.tabBtn').addClass('');
          $(this).addClass('');
          $('.comContent').hide();
          $('.comContent').eq(i).show();
        })
      })
      /*************表格***************/

      var tab = renderTable(table, url, '#tableL', wData, headArr, function (res) {
        $('[data-field=Id]').hide();
      });



      /*************表格***************/

      //修改跳转
      table.on('tool(tableL)', function (obj) {
        var that = this;
        var data = obj.data;
        if (obj.event === 'edit') {
          store.save('editData', data);
          window._EditFrameIndex = x_admin_show('修改网点', './jk_bjxq_detail.html');
        } 
      });

      /**************新增页面****************/
      $('#addBtn').click(function () {
        window._EditFrameIndex = x_admin_show('详情', './jk_bjxq_detail.html');
      });

      /***************搜索*********************/
      $('#serBtn').click(function () {
        var allData = {
          '[ORFuzzy]BankName': $.trim($('#serMsg').val()),
          '[ORFuzzy]BankNo': $.trim($('#serMsg').val())
        }

        tabReload(tab, allData);
      })



      var myChart = echarts.init(document.getElementById('main'));
      var myChartOff = echarts.init(document.getElementById('mainOff'));
      var myChartStuatus = echarts.init(document.getElementById('mainStatus'));
      var myChartPoints = echarts.init(document.getElementById('mainPoints'));
      var myChartCircle = echarts.init(document.getElementById('mainCircle'));
      var myChartCircle1 = echarts.init(document.getElementById('mainCircle1'));
      var myChartZhen = echarts.init(document.getElementById('mainZhen'));
      var myChartZhen1 = echarts.init(document.getElementById('mainZhen1'));
      var myChartXu = echarts.init(document.getElementById('mainXu'));
      var myChartXu1 = echarts.init(document.getElementById('mainXu1'));
      var data = [
        [[0, 0, "真实报警"], [33, 20, "真实报警"], [55, 40, "真实报警"], [70, 43, "真实报警"], [99, 41, "真实报警"], [96, 77, "真实报警"], [116, 65, "真实报警"], [136, 85, "真实报警"]],
        [[0, 20, "误报报警"], [44, 38, "误报报警"], [66, 20, "误报报警"], [91, 60, "误报报警"], [93, 38, "误报报警"], [109, 85, "误报报警"], [129, 56, "误报报警"], [142, 33, "误报报警"]]
      ];
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '今日行政区域分布',
          textStyle: {
            color: '#32C5FF'
          },
          subtext: '报警数量',
          subtextStyle: {
            color: 'white'
          },
          padding: [10, 0, 0, 0]
        },
        tooltip: {},
        legend: {
          data: ['报警'],
          right: 30,
          top: 10,
          textStyle:{
            color:"#fff"
          }
          

        },
        xAxis: {
          data: ["张北县", "桥东区", "宣化区", "桥西区", "万全区", "尚义县"],
          axisLabel:{
            interval:0
          },
          axisLine:{
            lineStyle:{
              color:"#54728d",
              width:2
            }
          }
        },
        yAxis: {
          scale: true,
          max: 400,
          min: 0,
          splitNumber: 4,
          axisLine:{
            lineStyle:{
              color:"#54728d",
              width:2
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [{
          name: '报警',
          type: 'bar',
          data: [280, 298, 180, 90, 150, 180],
          label: {
            normal: {
              show: true,
              position: 'top',
              color: '#e39717'
            }
          },
          barWidth: 20,
          itemStyle: {    // 图形的形状
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#002640'
              }, {
                offset: 1,
                color: '#1f6a79'
              }])
          },
        }]
      };
      var optionOff = {
        title: {
          text: '今日行政区域分布',
          textStyle: {
            color: '#32C5FF'
          },
          subtext: '报警数量',
          subtextStyle: {
            color: 'white'
          },
          padding: [10, 0, 0, 0]
        },
        tooltip: {},
        legend: {
          data: ['离线'],
          right: 30,
          top: 10,
          textStyle:{
            color:"#fff"
          }
        },
        xAxis: {
          data: ["张北县", "桥东区", "宣化区", "桥西区", "万全区", "尚义县"],
          axisLabel:{
            interval:0
          },
          axisLine:{
            lineStyle:{
              color:"#54728d",
              width:2
            }
          }
        },
        yAxis: {
          scale: true,
          max: 400,
          min: 0,
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLine:{
            lineStyle:{
              color:"#54728d",
              width:2
            }
          }
        },
        series: [{
          name: '离线',
          type: 'bar',
          data: [280, 298, 180, 90, 150, 180],
          label: {
            normal: {
              show: true,
              position: 'top',
              color: '#186d83'
            }
          },
          barWidth: 20,
          itemStyle: {    // 图形的形状
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#3a3e2c'
              }, {
                offset: 1,
                color: '#7a5917'
              }])
          },
        }]
      };
      
      //今日趋势分布
      var optionStuatus = {
        title: {
          text: '今日趋势分布',
          textStyle: {
            color: '#32C5FF'
          },
          subtext: '单位：个',
          subtextStyle: {
            color: 'white'
          },
          padding: [10,0,0,0]
        },
        tooltip: {},
        legend: {
        },
        xAxis: {
          data: ["12:00", "13:00", "14:00", "15:00", "16:00"],
          axisLine:{
            lineStyle:{
              color:"#ffffff",
              width:1
            }
          }
        },
        yAxis: {
          scale: true,
          max: 500,
          min: 0,
          splitNumber: 5,
          axisLine: { //y轴
            show: false
          },
          axisLine:{
            lineStyle:{
              color:"#ffffff",
              width:0
            }
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            data: [400, 330, 360, 300, 150],
            barWidth: 20,
            itemStyle: {    // 图形的形状
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//图例使用渐变色
                  offset: 0,
                  color: '#01e9f1'
                }, {
                  offset: 1,
                  color: '#006ba6'
                }])
              }
            }
          }, {

            name: '',
            type: 'line',
            //yAxisIndex: 1,
            data: [400, 330, 360, 300, 150],
            itemStyle: {
              color: '#ceba9c'
            }

          }
        ]
      };
      
      //
      var optionPoints = {
        title: {
          text: '今日趋势',
          textStyle: {
            color: '#32C5FF'
          },
          subtext: '报警数量',
          subtextStyle: {
            color: 'white'
          }
          //padding: [0, 0, 10, 50]
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          right: 10,
          data: ['真实报警', '误报报警'],
          textStyle:{
            color:"#fff"
          }
        },
        xAxis: {
          type: 'category',
          nameGap: 10 ,
          axisLine: { //y轴
            lineStyle : {
               color : '#ffffff'
             }
          }
          // data: ["工厂", "仓库", "加油站", "酒店", "医院", "学校", "写字楼", "三小场所"]
        },
        yAxis: {
          scale: true,
          max: 100,
          min: 0,
          splitNumber: 5,
          axisLine: { //y轴
            show: false ,
            lineStyle : {
               color : '#ffffff'
             }
          }
        },
        series: [{
          name: '真实报警',
          data: data[0],
          type: 'scatter',
          symbolSize: function (data) {
            return 10
          },
          // emphasis: {
          //   label: {
          //     show: true,
          //     formatter: function (param) {
          //       return param.data[2];
          //     },
          //     position: 'top'
          //   }
          // },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
              offset: 0,
              color: 'rgb(251, 118, 123)'
            }, {
              offset: 1,
              color: 'rgb(204, 46, 72)'
            }])
          }
        }, {
          name: '误报报警',
          data: data[1],
          type: 'scatter',
          symbolSize: function (data) {
            return 10;
          },
          // emphasis: {
          //   label: {
          //     show: true,
          //     formatter: function (param) {
          //       return param.data[2];
          //     },
          //     position: 'top'
          //   }
          // },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(25, 100, 150, 0.5)',
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
              offset: 0,
              color: 'rgb(129, 227, 238)'
            }, {
              offset: 1,
              color: 'rgb(25, 183, 207)'
            }])
          }
        }]
      };

      /*** 该区域报警趋势 ****/
      var optionCircle = {
        title: {
          text: '该区域报警趋势',
          textStyle: {
            color: '#32C5FF'
          },
          subtext: '报警数',
          subtextStyle: {
            color: 'white'
          },
          padding: [0, 0, 10, 50],
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [0, 6, 11, 16, 21, 26, 31],
          axisLine: {
            lineStyle:{
              color:"#ffff",
              width:1
            }
          }
        },
        yAxis: {
          max: 120,
          min: 0,
          splitNumber: 5,
          axisLine: { //y轴
            show: false,
            lineStyle:{
              color:"#ffff",
              width:1
            }
          }
        },
        series: [{
          name: name,
          type: 'line',
          smooth: true,
          sampling: 'average',
          areaStyle: {
            color: '#665236'
          },
          data: [60, 80, 42, 70, 58, 62, 20],
        }]
      };
      
      // 该区域报警处理趋势
      var optionCircle1 = {
        title: {
          text: '该区域报警趋势',
          textStyle: {
            color: '#32C5FF'
          },
          subtext: '处理数',
          subtextStyle: {
            color: 'white'
          },
          padding: [0, 0, 10, 50],
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [0, 6, 11, 16, 21, 26, 31]
        },
        yAxis: {
          max: 100,
          min: 0,
          splitNumber: 5,
        },
        series: [{
          name: name,
          type: 'line',
          smooth: true,
          sampling: 'average',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(120, 114, 16,.6)'
            }, {
              offset: 1,
              color: '#fff'
            }])
          },
          data: [60, 80, 42, 70, 58, 62, 20],
        }]
      };


      var optionYuanZhen = {
        graphic: {       //图形中间文字
          type: "text",
          left: "center",
          top: "center",
          text: "真实报警",
          subtext: "30%",
          style: {
            text: "真实报警" + "30%",
            textAlign: "center",
            fill: "#fff",
            fontSize: 10
          }
        },
        color: ['#ffffff', '#eb962c'],
        series: [
          {
            name: '报警来源',
            type: 'pie',
            radius: ['53%', '40%'],
            avoidLabelOverlap: false,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 30,  },
              { value: 70,  },
            ]
          }
        ]
      };

      var optionYuanXu = {
        graphic: {       //图形中间文字
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "虚假报警" + "70%",
            textAlign: "center",
            fill: "#fff",
            fontSize: 10
          }
        },
        color: ['#ffffff', '#206b7b'],
        series: [
          {
            name: '报警来源',
            type: 'pie',
            radius: ['53%', '40%'],
            avoidLabelOverlap: false, 
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 30,  },
              { value: 70,  },
            ]
          }
        ]
      };


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.resize();

      myChartOff.setOption(optionOff);
      myChartOff.resize();

      myChartStuatus.setOption(optionStuatus);
      myChartStuatus.resize();

      myChartPoints.setOption(optionPoints);
      myChartPoints.resize();

      myChartCircle.setOption(optionCircle);
      myChartCircle.resize();

      myChartCircle1.setOption(optionCircle1);
      myChartCircle1.resize();

      myChartZhen.setOption(optionYuanZhen);
      myChartZhen.resize();

      myChartXu.setOption(optionYuanXu);
      myChartXu.resize();

      myChartZhen1.setOption(optionYuanZhen);
      myChartZhen1.resize();

      myChartXu1.setOption(optionYuanXu);
      myChartXu1.resize();

    });
  </script>
</body>

</html>